import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Row, Radio, Table, InputNumber, Modal, Select, Checkbox, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import TransTable from './components/transTable'
import ProvinceTree from './components/provinceTree'
import { formItemLayout } from '@/utils/utils'
import { connect } from 'dva'
import {
  addTemple,
  getTemplateById,
  updateTmp,
} from '@/services/setting/trans'
import FreeTable from './components/freeTable'
import { router } from 'umi'

const FreightTmpDetail = props => {
  const { form, trans, location: { query }, dispatch } = props
  const { modalStatus, freeModal, } = trans
  const { getFieldDecorator } = form
  const [data, setData] = useState({})
  // 运送方式
  const [types, setTypes] = useState([])
  const [typeVisible, setTypeVisible] = useState(false)
  const [isFree, setIsFree] = useState('0')
  const [record, setRecord] = useState(undefined)
  const [tIndex, setTIndex] = useState(null)
  // 包邮
  const [freeList, setFreeList] = useState([])
  const [pinkage, setPinkage] = useState(true)
  const [freeVisible, setFreeVisible] = useState(false)
  const [fIndex, setFIndex] = useState(null)
  const [frecord, setFRecord] = useState(undefined)


  useEffect(() => {
    if(query && query.id) {
      init({
        id: query.id
      })
    }
    return () => dispatch({
      type: 'trans/clear'
    })
  }, [])

  const init = async params => {
    const res = await getTemplateById(params)
    if (res.code == 0) {
      setData(res.data)
      setPinkage(res.data.isSpecialDelivery == 1 ? false : true)
      dispatch({
        type: 'trans/update',
        payload: {
          details: res.data
        }
      })
    } else {
      message.warning(res.msg)
    }
  }

  const handleAdd = (e) => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values, record)
      if (!query.id) {
        // 新增
        addTemple({
          ...values,
          ...trans.params,
          frees: trans.freeRecord,
          types: trans.record,
        }).then(res => {
          message.info(res.msg)
          router.push('/setting/trans/freightTmp')
        })
      } else {
        // 编辑
        updateTmp({
          ...data,
          ...values,
          types: trans.record,
          frees: trans.freeRecord,
        }).then(res => {
          message.info(res.msg)
          router.push('/setting/trans/freightTmp')
        })
      }
    })
    setTypeVisible(!typeVisible)
  }
  const closeModal = () => {
    props.dispatch({
      type: 'trans/update',
      payload: {
        modalStatus: false,
        freeModal: false,
        // proName: undefined,
      }
    })
  }

  return (
    <PageHeaderWrapper>
      {/* <RenderButtom click={handleBtn} /> */}
      <Form {...formItemLayout}>
        {query.id && <Row type='flex'>
          <Col span={8}>
            <Form.Item label="当前模板id">
              {getFieldDecorator('id', {
                initialValue: data.id,
                rules: [
                  {
                    required: true,
                    message: '必填'
                  }
                ],
              })(<Input disabled />)}
            </Form.Item>
          </Col>
        </Row>}
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="模板名称">
              {getFieldDecorator('name', {
                initialValue: data.name,
                rules: [
                  {
                    required: true,
                    message: '必填'
                  }
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="计价方式">
              {getFieldDecorator('valuationType', {
                initialValue: data.valuationType || '0',
                rules: [
                ],
              })(<Radio.Group>
                  <Radio value={'0'}>按件数</Radio>
                  <Radio value={'1'}>按重量</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="是否包邮">
              {getFieldDecorator('isFreeDelivery', {
                initialValue: data.isFreeDelivery || '0',
                rules: [
                ],
              })(<Radio.Group onChange={e => setIsFree(e.target.value)}>
                  <Radio value={'0'}>自定义运费</Radio>
                  <Radio value={'1'}>卖家承担运费</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Col>
        </Row>
        {isFree == 0 && <TransTable isEdit={data} />}
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="">
              {getFieldDecorator('isSpecialDelivery', {
                initialValue: data.isSpecialDelivery == 1 ? true : false,
                valuePropName: 'checked'
              })(<Checkbox onChange={e => setPinkage(e.target.value)}>是否指定包邮</Checkbox>)}
            </Form.Item>
          </Col>
        </Row>
      </Form>
      {!pinkage && <FreeTable isEdit={data} />}
      {/* 运送方式modal */}
      <Modal
        title='新增/编辑'
        visible={modalStatus}
        onCancel={closeModal}
        onOk={closeModal}
      >
        <Form {...formItemLayout}>
          <ProvinceTree data={data.types} />
        </Form>
      </Modal>
      {/* 包邮modal */}
      <Modal
        title='新增/编辑'
        visible={freeModal}
        onCancel={closeModal}
        onOk={closeModal}
      >
        <Form {...formItemLayout}>
          <ProvinceTree 
            type={'free'}
            data={data.frees}
          />
        </Form>
      </Modal>
      <Button type="primary" onClick={handleAdd}>保存</Button>
      <Button onClick={() => router.push('/setting/trans/freightTmp')}>取消</Button>
    </PageHeaderWrapper>
    )
}

export default connect(({trans}) => ({
  trans,
}))(Form.create()(FreightTmpDetail))
